<template>
	<view class="main">
		<mx-navbar :title="'订单详情'"></mx-navbar>
		<view class="body" v-if="info.id">
			<view class="module">
				<view class="status">
					<text class="status-type">
						{{ info.state_name }}
					</text>
				</view>
				<view class="no">
					订单号:{{ info.order_sn }}
				</view>
				<view class="btn-group" v-if="info.state == 1">
					<view class="cu-btn opt-btn round cancel" @click.stop="orderCancel">
						取消订单
					</view>
					<view class="cu-btn opt-btn round" @click.stop="orderPay">
						立即支付
					</view>
				</view>
				<view class="btn-group" v-if="info.state == 3">
					<view class="cu-btn opt-btn round" @click.stop="receive">
						确认收货
					</view>
				</view>
			</view>

			<view class="com">
				<view class="ct flex align-center justify-between">
					<text class="tl">邮寄信息</text>
				</view>
				<view class="ci-item" v-if="info.addr_info?.name">
					<view class="citem-l">
						收货人:
					</view>
					<view class="citem-r">
						{{ info.addr_info.name || '' }}
						<text class="phone">{{ info.addr_info.mobile || '' }}</text>
					</view>
				</view>
				<view class="ci-item cuaddr">
					<view class="citem-l">
						收货地址:
					</view>
					<view class="citem-r">
						{{ info.addr_info.province || '' }}
						{{ info.addr_info.city || '' }}
						{{ info.addr_info.area || '' }}
						{{ info.addr_info.street || '' }}
						{{ info.addr_info.address || '' }}
					</view>
				</view>

				<view class="ci-item" v-if="info.express_company">
					<view class="citem-l">
						快递公司:
					</view>
					<view class="citem-r">
						{{ info.express_company || '' }}
					</view>
				</view>
				<view class="ci-item" v-if="info.express_no">
					<view class="citem-l">
						快递单号:
					</view>
					<view class="citem-r">
						{{ info.express_no || '' }}
					</view>
				</view>
			</view>

			<view class="module">
				<view class="gtop">
					<view class="gtop-tit">
						商品信息
					</view>
					<view class="gtr flex align-center" v-if="info.state == 2 || info.state == 3 || info.state == 4"
						@click="$go(`/pages-order/refund/apply?sn=${info.order_sn}`)">
						<text class="gtt mprice">申请售后</text>
						<text class="tri cuIcon cuIcon-right mprice"></text>
					</view>
				</view>
				<view class="imglist">
					<view class="item" :key="index" v-for="(goods, index) in info.goods_list"
						@click="$go(`/pages/goods/index?id=${goods.id}`)">
						<image class="img-item" :src="$imgUrl + goods.image"></image>
						<view class="item-text">
							<view class="name">{{ goods.name }}</view>
							<view class="spec text-limit-2" v-if="goods.mdl">
								<text>已选：{{ goods.mdl }}</text>
							</view>
							<view class="num">
								<view class="order-price">
									<text class="n-price ">￥</text>{{ goods.original_price }}
								</view>
								<view>× {{ goods.count }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="operate">
					<text v-if="info.order_goods_count">共{{ info.order_goods_count }}件</text>
					<view class="product-details">已优惠 <text class="pi">¥</text><text class="pn">{{
			info.total_discount_amount || 0
		}}</text>
						元 实付：<text class="pi">¥</text><text class="pn">{{ info.payment_amount }}</text></view>
				</view>
			</view>


			<view class="module">
				<view class="title">订单信息</view>
				<view class="cell-group">
					<view class="cell-item">
						<view class="cell-lable">订单编号</view>
						<view class="cell-value">{{ info.order_sn }}</view>
					</view>
					<view class="cell-item">
						<view class="cell-lable">下单时间</view>
						<view class="cell-value">{{ info.create_time }}</view>
					</view>
					<view class="cell-item" v-if="info.pay_time">
						<view class="cell-lable">支付时间</view>
						<view class="cell-value">{{ info.pay_time }}</view>
					</view>

					<view class="cell-item">
						<view class="cell-lable">商品总额</view>
						<view class="cell-value">{{ info.original_amount }}</view>
					</view>

					<view class="cell-item">
						<view class="cell-lable">折扣优惠</view>
						<view class="cell-value">-{{ info.discount_amount }}</view>
					</view>

					<view class="cell-item">
						<view class="cell-lable">优惠券</view>
						<view class="cell-value">-{{ info.coupon_amount }}</view>
					</view>

					<view class="cell-item">
						<view class="cell-lable">满减</view>
						<view class="cell-value">-{{ info.manjian_amount }}</view>
					</view>

					<view class="cell-item">
						<view class="cell-lable">实付</view>
						<view class="cell-value mprice">{{ info.payment_amount }}</view>
					</view>



				</view>
			</view>
		</view>
		<mx-special v-model="pn" :scroll_top="sh"></mx-special>
	</view>
</template>

<script setup>
const {
	proxy
} = getCurrentInstance()

const data = reactive({
	sn: '',
	info: {}
})
const { info, sn } = toRefs(data)

onLoad((options) => {
	data.sn = options.sn || ''
})

onShow(() => {
	getData()

})
async function getData() {
	let res = await proxy.$api('OrderDetail', {
		order_sn: data.sn
	})
	if (res.code === 0) {
		data.info = res.data
	}
	setTimeout(() => {
		getContentHeight()
	}, 300);
}

async function orderCancel() {
	let res = await proxy.$post('OrderCancel', { order_sn: data.order_sn })
	if (res.code === 0) {
		getData()
	}
}

// 确认收货
async function receive() {
	let res = await proxy.$api('OrderReceive', { order_sn: data.order_sn })
	if (res.code === 0) {
		getData()
	}
}


// 支付
async function orderPay() {
	let res = await proxy.$api("OrderPay", {
		order_sn: data.sn
	});
	if (res.code === 0) {
		proxy.$tools.pay(res.data).then(async _ => {
			proxy.$go(`/pages/pay/res?sn=${data.sn}&type=succ`)
		}).catch(_ => {
			proxy.$go(`/pages/pay/res?sn=${data.sn}&type=error`)
		})
	}
}



const pn = ref(1)
onReachBottom(() => {
	pn.value += 1
})

const sh = ref(0)
function getContentHeight() {
	const query = uni.createSelectorQuery().in(proxy)
	query
		.select(`.body`)
		.boundingClientRect((res) => {
			sh.value = res && (res.height)
		})
		.exec()
}

</script>

<style lang="scss" scoped>
.body {
	padding: 20rpx;

	.module {
		border-radius: 20rpx;
		background-color: #fff;
		padding: 30rpx;

		margin-bottom: 20rpx;

		.status {
			text-align: center;
			font-size: 34rpx;
			color: $main_color;
			font-weight: 500;
		}

		.no {
			text-align: center;
			font-size: 28rpx;
			// font-weight: 500;
			padding: 20rpx 0;
		}

		.btn-group {
			width: 100%;
			height: auto;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.opt-btn {
				margin: 0 10rpx;
				background: $main_color;
				line-height: 64rpx;
				border: 1px solid #ececec;
				line-height: 64rpx;
				font-size: 24rpx;
				padding: 0 30rpx;
				color: #fff;

				&.cancel {
					background: none;
					color: #1f1f1f;
				}
			}
		}

		.gtop {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f0f1f3;
			margin-bottom: 24rpx;
			padding-bottom: 24rpx;

			.gtt {
				font-size: 24rpx;
			}

			.cuIcon {
				font-size: 24rpx;
			}

			.gtop-tit {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #000;

			}
		}

		.imglist {
			flex-grow: 1;
			overflow: hidden;
			text-align: left;

			.img-item {
				width: 176rpx;
				height: 176rpx;
				margin-right: 16rpx;
				flex-grow: 0;
			}

			.item {
				display: flex;
				width: 100%;
				border-bottom: 1px solid #f0f1f3;
				padding-bottom: 24rpx;
				margin-bottom: 24rpx;
				position: relative;

				&:last-child {
					// margin-bottom: 0;
					// border-bottom: none;
					// padding-bottom:0;
				}

				.item-text {
					flex: 1;
					position: relative;

					.name {
						width: 100%;
						display: -webkit-box;
						overflow: hidden;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						color: #1f1f1f;
						font-size: 24rpx;
						line-height: 36rpx;
						margin-bottom: 10rpx;
						padding: 2rpx 0;
					}

					.spec {
						width: 100%;
						color: #999999;
						font-size: 22rpx;
						position: relative;
						margin-bottom: 10rpx;
					}

					.num {
						display: flex;
						justify-content: space-between;
						flex: 1;
						font-size: 24rpx;
						position: absolute;
						width: 100%;
						bottom: 10rpx;
						left: 0;

						.order-price {
							font-size: 28rpx;
							color: #f00;

							.n-price {
								font-size: 20rpx;
							}
						}
					}
				}
			}
		}

		.operate {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;

			.product-details {
				flex: 1;
				// padding: 0 0 24rpx;
				text-align: right;
				font-size: 26rpx;
				color: #666;

				.pi {
					font-size: 20rpx;
					color: #f00;
				}

				.pn {
					font-size: 30rpx;
					color: #f00;
				}
			}

		}

		.title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 34rpx;
		}

		.cell-group {
			.cell-item {
				width: 100%;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-top: 36rpx;

				.cell-lable {
					width: 200rpx;
					font-size: 26rpx;
					color: #999;
				}

				.cell-value {
					flex: 1;
					font-size: 26rpx;
					text-align: right;
				}
			}
		}
	}

	.com {
		width: 100%;
		height: auto;
		margin-bottom: 24rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx 24rpx 0;

		.ct {
			font-size: 28rpx;
			font-weight: bold;
			color: #000;
			padding-bottom: 24rpx;

			.trt,
			.tri {
				font-size: 24rpx;
				font-weight: normal;
				color: #666;
			}

			.msucc {
				color: #4fa537;
			}
		}

		.ci-item {
			color: #000;
			display: flex;
			padding-bottom: 24rpx;
			padding-left: 24rpx;
			align-items: center;

			.citem-l {
				width: 130rpx;
				font-size: 26rpx;
			}

			.citem-r {
				flex: 1;
				font-size: 26rpx;
			}

			.phone {
				margin-left: 30rpx;
			}

			.cuaddr {
				align-items: flex-start;
				position: relative;
				top: 2rpx;
			}
		}
	}
}
</style>